<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios拦截器</title>
    <script src="axios.js"></script>
</head>
<body>
<script>
    /**
     * 拦截器Interceptors分为两种:
     * 请求拦截器
     * 相应拦截器
     * 就像一道一道的关卡,对请求和响应结果进行检查或做出处理,满足放行,不满足拦截
     *
     * 执行顺序
     *  发送请求=>请求拦截器=>响应拦截器=>得到响应
     *
     * 如果有多个拦截器的话
     *  请求拦截器:后进先执行
     *  响应拦截器:先进先执行
     */

    //设置请求拦截器
    axios.interceptors.request.use(function (config) {
        console.log('请求拦截器1执行')
        // 对请求参数进行设置
        config.params = {b: 100}
        return config;
    }, function (error) {
        console.log('请求拦截器1失败')
        return Promise.reject(error);
    });

    axios.interceptors.request.use(function (config) {
        console.log('请求拦截器2执行')
        // 对请求参数进行设置
        config.params = {a: 2000}
        return config;
    }, function (error) {
        console.log('请求拦截器2失败')
        return Promise.reject(error);
    });

    // 设置响应拦截器
    axios.interceptors.response.use(function (response) {
        console.log('响应拦截器1成功')
        return response;
    }, function (error) {
        console.log('响应拦截器1失败')
        return Promise.reject(error);
    });

    axios.interceptors.response.use(function (response) {
        console.log('响应拦截器2成功')
        return response;
    }, function (error) {
        console.log('响应拦截器2失败')
        return Promise.reject(error);
    });

    //发送请求
    axios({
        method: 'GET',
        url: 'http://localhost:3000/posts'
    }).then(
        response => {
            console.log(response);
        }
    )
</script>
</body>
</html>